<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>

<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path;
    SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd hh:mm:ss");
    Date date = new Date();
    String nowDate = sdf.format(date);
%>

<%--代表HTML5--%>
<!DOCTYPE html>
<html>
<%--Header Begin--%>
<head>
    <title>View | 景点</title>
    <jsp:include page="../../../includes/header.jsp"/>
    <link href="//unpkg.com/layui@2.9.7/dist/css/layui.css" rel="stylesheet">
</head>

<body class="skin-blue layout-top-nav" style="height: auto; min-height: 100%;">

<div class="wrapper" style="height: auto; min-height: 100%;">

    <jsp:include page="../../../includes/top_navigation_reception.jsp"/>

    <!-- Full Width Column -->
    <div class="content-wrapper" style="min-height: 471px;">
        <div class="container">
            <!-- Content Header (Page header) -->
            <section class="content-header">
                <br>
                <h1>
                    旅游景点 | View
                    <small>最新发布</small>
                    <button type="button" style="float: right" class="layui-btn layui-btn-primary"  lay-on="page">投诉反馈</button>
                </h1>
<%--                <ol class="breadcrumb">--%>
<%--                    <br>--%>
<%--                    <li><a href="${pageContext.request.contextPath}/view/point"><i class="fa fa-dashboard"></i>旅游景点</a>--%>
<%--                    </li>--%>
<%--                    <li><a href="#">SHOW</a></li>--%>

<%--                </ol>--%>
            </section>
            <br>
            <section class="content">
                <div class="row">
                    <div class="thumbnail">
                        <div class="caption">
                            <div class="container-fluid">
                                <div class="row">
                                    <div class="layui-row">
                                        <div class="layui-col-xs6 layui-col-md4">
                                            <div class="layui-card">
                                                <div class="layui-card-header" style="height: auto">
                                                    <div style="display: flex">
                                                        🏞️景区名称：${viewPoint.tpTitle}
                                                    </div>
                                                    <div id="ID-rate-demo-setText-1"
                                                         lay-options="{value: ${viewPoint.score}}"></div>
                                                </div>
                                                <div class="layui-card-body">
                                                    <div>
                                                        ${viewPoint.tpVcontent}
                                                    </div>
                                                    <br/>
                                                    <div style="display: flex">
                                                        <div><h5
                                                                style="padding-top: 10px">
                                                            ✨等级: ${viewPoint.tpLevel}</h5>
                                                            <h5 style="padding-top: 10px">
                                                                ⏱️开放时间: ${viewPoint.tpOpentime==null?"暂未开放":viewPoint.tpOpentime}</h5>
                                                            <h5 style="padding-top: 10px">
                                                                💰景点价格: ${viewPoint.tpPrice}</h5></div>
                                                        <div style="margin-left: 15px;padding-left: 15px;border-left: #eceff7 solid 1pt">
                                                            <h5 style="padding-top: 10px">
                                                                🌈类型: ${viewPoint.tpVtype}</h5>
                                                            <h5 style="padding-top: 10px">
                                                                🏡详细地址: ${fn:substring(viewPoint.tpZip,0,7)}${viewPoint.tpZip.length()>7?"..":''}</h5>
                                                            <h5 style="padding-top: 10px">
                                                                📞电话: ${viewPoint.tpVphone}</h5></div>

                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="layui-col-xs12 layui-col-md8">
                                            <div class="layui-card">
                                                <div class="layui-card-header">🏞️景点图片</div>
                                                <div class="layui-card-body">
                                                    <div>
                                                        <div class="layui-carousel" id="ID-carousel-demo-image">
                                                            <div carousel-item style="border-radius: 10px">
                                                                <c:forEach var="picture"
                                                                           items="${viewPoint.pictureList}">
                                                                    <div><img src="${picture}" style="width: 720px; height: 360px;">
                                                                    </div>
                                                                </c:forEach>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>

                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <%--留言功能--%>
                        <div style="margin:0 2% 0 2%;">
                            <br/>
                            <!-- 留言的表单 -->
                            <form class="layui-form" action="${pageContext.request.contextPath}/article/saveWords"
                                  method="post">
                                <input name="lw_name" value="${user.uname}" hidden="hidden"/>
                                <input name="lw_date" value="<%=nowDate%>" hidden="hidden"/>
                                <input name="lw_for_article_id" value="${viewPoint.tpVid}" hidden="hidden"/>

                                <div class="layui-input-block" style="margin-left: 0;">
                                    你的评价：
                                    <div id="ID-rate-demo-setText-2" name="score"></div>
                                    <input type="hidden" id="hiddenScore" name="score" value="5"/>
                                    <textarea id="lw_content" name="lw_content" placeholder="请输入你的留言"
                                              class="layui-textarea"
                                              style="height: 150px;"></textarea>
                                </div>
                                <br/>
                                <div class="layui-input-block" style="text-align: left;margin-left: 0;">
                                    <input type="submit" class="btn btn-primary" value="留言">
                                </div>
                            </form>
                            <br/>
                            <div class="layui-tab" lay-filter="test-hash">
                                <ul class="layui-tab-title">
                                    <li class="layui-this" lay-id="11">点评🖱️</li>
<%--                                    <li lay-id="22">问答</li>--%>
                                </ul>
                                <div class="layui-tab-content">
                                    <div class="layui-tab-item layui-show">
                                        <div class="layui-row layui-col-space30">
                                            <div class="layui-col-md5">
                                                <div class="grid-demo">
                                                    <div class="layui-card">
                                                        <div class="layui-card-header" style="height: auto">
                                                            <div id="ID-rate-demo-readonly"></div>
                                                        </div>
                                                        <div class="layui-card-body">
                                                            <c:forEach var="statics" items="${wordStatics}">
                                                                ${statics.scoreText}：
                                                                <div class="layui-progress" style="margin-bottom: 30px">
                                                                    <div class="layui-progress-bar"
                                                                         lay-percent="${statics.scoreRatioText}">
                                                                    </div>
                                                                </div>
                                                            </c:forEach>
                                                            <img style="border-radius: 10px; width: 30vh"
                                                                 src="https://img0.baidu.com/it/u=2992623689,540442647&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1710781200&t=5e83e7951cb2ef54a159f3404495e165">
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="layui-col-md7">
                                                <div class="grid-demo grid-demo-bg1"><!-- 留言信息列表展示 -->
                                                    <div>
                                                        <ul>
                                                            <!-- 先遍历留言信息（一条留言信息，下面的全是回复信息） -->
                                                            <c:forEach items="${lw_list}" var="words">
                                                                <!-- 如果留言信息是在本文章下的才显示 -->
                                                                <c:if test="${words.lw_for_article_id eq viewPoint.tpVid}">
                                                                    <li style="border-top: 1px dotted #01AAED">
                                                                        <br/>
                                                                        <div style="text-align: left;color:#444">
                                                                            <div>
                                                                                <span style="color:#01AAED">${words.lw_name==null?"匿名用户":words.lw_name}</span>
                                                                            </div>
                                                                            <div class="class-test-rate"
                                                                                 lay-options="{value: ${words.score}}"></div>
                                                                            <div>${words.lw_content}</div>
                                                                        </div>
                                                                        <div>
                                                                            <div class="comment-parent"
                                                                                 style="text-align:left;margin-top:7px;color:#444">
                                                                                <span>${words.lw_date}</span>
                                                                                &nbsp;&nbsp;&nbsp;&nbsp;
                                                                                <p>
                                                                                    <a href="javascript:;"
                                                                                       style="text-decoration: none;"
                                                                                       onclick="btnReplyClick(this)">回复</a>
                                                                                </p>
                                                                            </div>
                                                                            <!-- 回复表单默认隐藏 -->
                                                                            <div class="replycontainer layui-hide"
                                                                                 style="margin-left: 61px;">
                                                                                <form action="${pageContext.request.contextPath}/article/saveReply"
                                                                                      method="post"
                                                                                      class="layui-form">
                                                                                    <input name="lr_for_article_id"
                                                                                           id="lr_for_article_id"
                                                                                           value="${viewPoint.tpVid}"
                                                                                           hidden="hidden"/>
                                                                                    <input name="lr_name" id="lr_name"
                                                                                           value="${user.uname}"
                                                                                           hidden="hidden"/>
                                                                                    <input name="lr_date" id="lr_date"
                                                                                           value="<%=nowDate%>"
                                                                                           hidden="hidden"/>
                                                                                    <input name="lr_for_name"
                                                                                           id="lr_for_name"
                                                                                           value="${words.lw_name}"
                                                                                           hidden="hidden"/>
                                                                                    <input name="lr_for_words"
                                                                                           id="lr_for_words"
                                                                                           value="${words.lw_id}"
                                                                                           hidden="hidden"/>
                                                                                    <input name="lr_for_reply"
                                                                                           id="lr_for_reply"
                                                                                           value="${reply.lr_id}"
                                                                                           hidden="hidden"/>
                                                                                    <div class="layui-form-item">
															<textarea name="lr_content" id="lr_content"
                                                                      lay-verify="replyContent"
                                                                      placeholder="请输入回复内容"
                                                                      class="layui-textarea"
                                                                      style="min-height:80px;"></textarea>
                                                                                    </div>
                                                                                    <div class="layui-form-item">
                                                                                        <button id="replyBtn"
                                                                                                class="layui-btn layui-btn-mini"
                                                                                                lay-submit="formReply"
                                                                                                lay-filter="formReply">
                                                                                            提交
                                                                                        </button>
                                                                                    </div>
                                                                                </form>
                                                                            </div>
                                                                        </div>

                                                                        <!-- 以下是回复信息 -->
                                                                        <c:forEach items="${lr_list}" var="reply">
                                                                            <!-- 每次遍历出来的留言下存在回复信息才展示（本条回复信息是本条留言下的就显示在当前留言下） -->
                                                                            <c:if test="${reply.lr_for_article_id eq viewPoint.tpVid && reply.lr_for_words eq words.lw_id}">
                                                                                <div style="text-align: left;margin-left:61px;color: #444">
                                                                                    <div>
                                                                                        <span style="color:#5FB878">${reply.lr_name}&nbsp;&nbsp;</span>
                                                                                    </div>
                                                                                    <div>
                                                                                        @${reply.lr_for_name}:&nbsp;&nbsp; ${reply.lr_content}</div>
                                                                                </div>
                                                                                <div>
                                                                                    <div class="comment-parent"
                                                                                         style="text-align:left;margin-top:7px;margin-left:61px;color:#444">
                                                                                        <span>${reply.lr_date}</span>
                                                                                        &nbsp;&nbsp;&nbsp;&nbsp;
                                                                                        <p>
                                                                                            <a href="javascript:;"
                                                                                               style="text-decoration: none;"
                                                                                               onclick="btnReplyClick(this)">回复</a>
                                                                                        </p>
                                                                                        <hr style="margin-top: 7px;"/>
                                                                                    </div>
                                                                                    <!-- 回复表单默认隐藏 -->
                                                                                    <div class="replycontainer layui-hide"
                                                                                         style="margin-left: 61px;">
                                                                                        <form action="/article/saveReply"
                                                                                              method="post"
                                                                                              class="layui-form">
                                                                                            <input name="lr_for_article_id"
                                                                                                   id="lr_for_article_id"
                                                                                                   value="${viewPoint.tpVid}"
                                                                                                   hidden="hidden"/>
                                                                                            <input name="lr_name"
                                                                                                   id="lr_name"
                                                                                                   value="${user.uname}"
                                                                                                   hidden="hidden"/>
                                                                                            <input name="lr_date"
                                                                                                   id="lr_date"
                                                                                                   value="<%=nowDate%>"
                                                                                                   hidden="hidden"/>
                                                                                            <input name="lr_for_name"
                                                                                                   id="lr_for_name"
                                                                                                   value="${words.lw_name}"
                                                                                                   hidden="hidden"/>
                                                                                            <input name="lr_for_words"
                                                                                                   id="lr_for_words"
                                                                                                   value="${words.lw_id}"
                                                                                                   hidden="hidden"/>
                                                                                            <input name="lr_for_reply"
                                                                                                   id="lr_for_reply"
                                                                                                   value="${reply.lr_id}"
                                                                                                   hidden="hidden"/>
                                                                                            <div class="layui-form-item">
                                                    <textarea name="lr_content" id="lr_content"
                                                              lay-verify="replyContent" placeholder="请输入回复内容"
                                                              class="layui-textarea" style="min-height:80px;">
                                                      @${words.lw_name}:&nbsp;&nbsp;
                                                  </textarea>
                                                                                            </div>
                                                                                            <div class="layui-form-item">
                                                                                                <button id="replyBtn"
                                                                                                        class="layui-btn layui-btn-mini"
                                                                                                        lay-submit="formReply"
                                                                                                        lay-filter="formReply">
                                                                                                    提交
                                                                                                </button>
                                                                                            </div>
                                                                                        </form>
                                                                                    </div>
                                                                                </div>
                                                                            </c:if>
                                                                        </c:forEach>
                                                                    </li>
                                                                </c:if>
                                                            </c:forEach>
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                    <div class="layui-tab-item">内容-2</div>
                                    <div class="layui-tab-item">内容-3</div>
                                    <div class="layui-tab-item">内容-4</div>
                                    <div class="layui-tab-item">内容-5</div>
                                </div>
                            </div>

                        </div>
                    </div>

                </div>
            </section>
            <br>
            <!-- /.container -->
        </div>
        <!-- /.content-wrapper -->

    </div>

    <%--版权--%>
    <jsp:include page="../../../includes/copyright.jsp"/>
    <!-- ./wrapper -->
    <%--js--%>
    <jsp:include page="../../../includes/footer.jsp"/>
    <script src="//unpkg.com/layui@2.9.7/dist/layui.js"></script>
    <%--回复--%>
    <script>
        function btnReplyClick(elem) {
            if ($(this)) {
            } else if (!$(this)) {
                $(elem).parent('p').parent('.comment-parent').siblings('.replycontainer').toggleClass('layui-show');
            }
            $(elem).parent('p').parent('.comment-parent').siblings('.replycontainer').toggleClass('layui-hide');
            if ($(elem).text() === '回复') {
                $(elem).text('收起')
            } else {
                $(elem).text('回复')
            }
        }

        $("#replyBtn").click(function () {
            var lr_for_article_id = $("#lr_for_article_id").val();
            var lr_name = $("#lr_name").val();
            var lr_date = $("#lr_date").val();
            var lr_for_name = $("#lr_for_name").val();
            var lr_content = $("#lr_content").val();
            var lr_for_words = $("#lr_for_words").val();
            $.ajax({
                url: '/article/saveReply',
                type: 'POST',
                data: [{
                    lr_for_article_id: lr_for_article_id,
                    lr_name: lr_name,
                    lr_date: lr_date,
                    lr_for_name: lr_for_name,
                    lr_content: lr_content,
                    lr_for_words: lr_for_words
                }],
                success: function (data) {
                    layer.open({
                        title: '提示信息',
                        content: '留言成功',
                        btn: ['确定'],
                        btn1: function (index) {
                            $("body").html(data);
                        }
                    });
                },
                error: function () {
                    layer.open({
                        title: '提示信息',
                        content: '出现未知错误'
                    });
                }
            });
        });


    </script>
    <script>window._bd_share_config = {
        "common": {
            "bdSnsKey": {},
            "bdText": "",
            "bdMini": "2",
            "bdMiniList": false,
            "bdPic": "",
            "bdStyle": "0",
            "bdSize": "16"
        },
        "share": {"bdSize": 16},
        "image": {
            "viewList": ["sqq", "weixin", "douban", "tsina", "tqq", "renren", "qzone"],
            "viewText": "分享到：",
            "viewSize": "16"
        },
        "selectShare": {
            "bdContainerClass": null,
            "bdSelectMiniList": ["sqq", "weixin", "douban", "tsina", "tqq", "renren", "qzone"]
        }
    };
    with (document) 0[(getElementsByTagName('head')[0] || body).appendChild(createElement('script')).src = 'http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion=' + ~(-new Date() / 36e5)];


    </script>
    <script>
        layui.use(function () {
            var layer = layui.layer;
            var util = layui.util;
            // 批量事件
            util.on('lay-on', {
                page: function(){
                    // 页面层
                    layer.open({
                        type: 1,
                        title: '投诉反馈',
                        area: ['420px', '240px'], // 宽高
                        content: '<div style="padding: 11px;">' +
                            '<form id="formId" class="form-horizontal" action="/feedback/saveViewpoint" method="post">' +
                            '<div class="box-body">' +
                            '<div class="form-group"><label for="title" class="col-sm-2 control-label">标题</label><div class="col-sm-10"><input type="text" name="title" class="form-control" id="title" ></div></div>' +
                            '<div class="form-group"><label for="score" class="col-sm-2 control-label">评分</label><div id="ID-rate-demo-setText-3" name="score1"></div><input type="hidden" id="hiddenScore1" name="score" value="5"/></div>' +
                            '<div class="form-group"><label for="content" class="col-sm-2 control-label">内容</label><div class="col-sm-10"><textarea name="content" id="content" placeholder="请输入投诉内容" class="layui-textarea"></textarea></div></div>' +
                            '</div><input type="hidden" id="viewpointIdStr" name="viewpointIdStr" value="${viewPoint.tpVid}"/><input type="hidden" readonly name="userId" value="${user.uid}" class="form-control" id="userId" placeholder="${user.uid}"><button id="btnSunmit" type="submit" class="btn btn-info pull-right" onclick="">提交 </button></form>' +
                            '</div>',
                        success: function(layero, index) {
                            var rate = layui.rate;
                            // 渲染

                            rate.render({
                                elem: '#ID-rate-demo-setText-3',
                                value: 5,
                                text: true,
                                setText: function (value) { // 自定义文本的初始回调
                                    const arrs = {
                                        '1': '非常不满意',
                                        '2': '不满意',
                                        '3': '一般',
                                        '4': '满意',
                                        '5': '非常满意',
                                    };
                                    this.span.text(arrs[value] || (value + "星"));
                                },
                                choose: function (value) {
                                    $('#hiddenScore1').val(value); // 获得选中的评分值
                                }
                            });
                        }
                    });
                },
            })
            var element = layui.element;

            // hash 地址定位
            var hashName = 'tabid'; // hash 名称
            var layid = location.hash.replace(new RegExp('^#' + hashName + '='), ''); // 获取 lay-id 值

            // 初始切换
            element.tabChange('test-hash', layid);
            // 切换事件
            element.on('tab(test-hash)', function (obj) {
                location.hash = hashName + '=' + this.getAttribute('lay-id');
            });
            var carousel = layui.carousel;
            // 渲染 - 图片轮播
            carousel.render({
                elem: '#ID-carousel-demo-image',
                width: '720px',
                height: '360px',
                interval: 3000
            });
            var rate = layui.rate;
            // 渲染
            rate.render({ // eg1
                elem: '#ID-rate-demo-setText-2',
                value: 5,
                text: true,
                setText: function (value) { // 自定义文本的初始回调
                    var arrs = {
                        '1': '非常不满意',
                        '2': '不满意',
                        '3': '一般',
                        '4': '满意',
                        '5': '非常满意',
                    };
                    this.span.text(arrs[value] || (value + "星"));
                },
                choose: function (value) {
                    $('#hiddenScore').val(value); // 获得选中的评分值
                }
            });
            // 渲染
            rate.render({
                elem: '#ID-rate-demo-readonly',
                value: 4,
                readonly: true
            });
            rate.render({ // eg1
                elem: '#ID-rate-demo-setText-1',
                value: 3,
                readonly: true,
                text: true,
                readonly: true,
                setText: function (value) { // 自定义文本的初始回调
                    var arrs = {
                        '1': '非常不满意',
                        '2': '不满意',
                        '3': '一般',
                        '4': '满意',
                        '5': '非常满意',
                    };
                    this.span.text(arrs[value] || (value + "星"));
                }
            });
        });

        layui.use(function () {
            var rate = layui.rate;
            // 单个渲染
            rate.render({
                elem: '#ID-test-rate'
            });
            // 批量渲染
            rate.render({
                elem: '.class-test-rate',
                readonly: true,
                text: true,
                setText: function (value) { // 自定义文本的初始回调
                    var arrs = {
                        '1': '非常不满意',
                        '2': '不满意',
                        '3': '一般',
                        '4': '满意',
                        '5': '非常满意',
                    };
                    this.span.text(arrs[value] || (value + "星"));
                }
            });
        });


    </script>

</body>
</html>